<template>
  <div class="yygh_search re">
    <ul class="fl" @mouseenter="mouseenterMenu" @mouseleave="mouseleaveMenu" ref="menuList">
      <li v-for="(value,index) in menu"  :key="index" @click="clickMenu">
        <router-link :to="value.path" :class="{ hover:index == active }">{{value.name}}</router-link>
      </li>
    </ul>
    <ul class="fl">
      <!-- <li class="t0 shopping-cart">
        <router-link to="/mall/shopping-cart">
        <i class="iconfont icon-gouwuche"></i>
        购物车
        <span class="shopping-cart-num">3</span>
        </router-link>
      </li> -->
    </ul>
    <ul class="fr" v-show="showsearch">
      <li class="t0">输入您需要的药品</li>
      <li>
        <el-input v-model="input" placeholder="请输入药品关键词" @keypress.native.enter="emitSearch"></el-input>
      </li>
      <li>
        <el-button type="primary" style="background:#EE7100;" @click="emitSearch">查找</el-button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: '',
      active: this.activeitem
    }
  },
  props: {
    menu: {
      default () {
        return [
          {name: '药品分类', path: '/'},
          {name: '热门药品', path: '/'},
          {name: '家庭常备', path: '/family'},
          {name: '男科用药', path: '/andrology'},
          {name: '妇科用药', path: '/gynaecology'},
          {name: '儿科用药', path: '/pediatrics'},
          {name: '专科用药', path: '/specialty'},
          

          // {name: '我的订单', path: '/mall/orders'},
          // {name: '物流查询', path: '/mall/express'}
        ]
      }
    },
    showsearch: {
      default () {
        return true
      }
    },
    activeitem: {
      default () {
        return 
      }
    }
  },
  mounted () {
    let _this = this
    document.onclick = function () {
      _this.input = ''
    }
  },
  methods: {
    emitSearch () {
      this.$emit('search', this.input)
    },
    mouseenterMenu(e){
      let menuList = this.$refs.menuList
      menuList.style.height = 'auto';
    },
    mouseleaveMenu(e){
       let menuList = this.$refs.menuList
      menuList.style.height = '42px';
    },
    clickMenu(){
      let menuList = this.$refs.menuList
      menuList.style.height = '42px';
    }
  }
}
</script>

<style scoped>
.yygh_search>ul>li>a{
  color: #fff;
}
.yygh_search>ul>li:hover a{
  color: #333;
  background: #fff;
}
</style>
